<template>
  <div class="category">
    <div class="search" @click="tosearch">
      <div class="ser">
        <span class="icon"></span>
        <span>商品搜索,共239款好物</span>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="iconText" @click="selectitem(item.id, index)" v-for="(item, index) in listData" :class="[index == nowIndex ? 'active' : '']" :key="index">
          <text> {{ item.name }}</text>
        </div>
      </div>
      <div class="right">
        <div class="banner">
          <img class="img" :src="detailData.banner_url" alt="" />
        </div>
        <div class="title">
          <span>—</span>
          <span>{{ detailData.name }}分类</span>
          <span>—</span>
        </div>
        <div class="bottom">
          <div @click="categoryList(item.id)" v-for="(item, index) in detailData.subList" :key="index" class="item">
            <img class="img" :src="item.wap_banner_url" alt="" />
            <text>{{ item.name }}</text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import data from './data.json'
export default {
  created() {},
  mounted() {
    // 获取列表数据
    this.getListData()
    // 获取默认右侧数据
    this.selectitem(this.id, this.nowIndex)
  },
  data() {
    return {
      data,
      id: '1005000',
      nowIndex: 0,
      listData: [],
      detailData: {},
    }
  },
  components: {},
  methods: {
    tosearch() {
      // wx.navigateTo({ url: '/pages/search/main' })
    },
    async selectitem(id, index) {
      this.nowIndex = index
      const data = this.data.currentaction
      //  await this.commonApi({
      //   url: "/category/currentaction",
      //   method: "get",
      //   params: {
      //     id,
      //   },
      // });
      this.detailData = data.data.currentOne
    },
    async getListData() {
      const data = this.data.category
      // await this.commonApi({
      //   url: '/category/indexaction',
      //   method: 'get',
      // })
      this.listData = data.categoryList
    },
    categoryList(id) {
      console.log('tiaozhuan')
      this.$router.push({
        path: '/categoryList',
        query: {
          id,
        },
      })
      // wx.navigateTo({
      //   url: "../categoryList/main?id=" + id,
      // });
    },
  },
  computed: {},
}
</script>
<style lang="scss" scoped>
@import './style';
</style>
